<template>
  <div style="margin-top: 16px">
    <el-form :model="serviceTaskForm" label-width="100px" size="small" >
      <el-form-item label="服务类型" prop="type" :rules="{ required: true, trigger: ['blur', 'change'] }">
        <el-select v-model="serviceTaskForm.type" @change="changeType">
          <el-option v-for="item in typeList" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <template v-if="serviceTaskForm.type === 'normal'">
        <normal-task-panel id="id"></normal-task-panel>
      </template>
      <template v-else-if="serviceTaskForm.type === 'mail'">
        <mail-task-panel id="id"></mail-task-panel>
      </template>
      <template v-else-if="serviceTaskForm.type === 'mule'">
        <mule-task-panel id="id"></mule-task-panel>
      </template>
    </el-form>
  </div>
</template>

<script>
import NormalTaskPanel from "./serviceTask/normalTaskPanel";
import MailTaskPanel from "./serviceTask/mailTaskPanel";
import MuleTaskPanel from "./serviceTask/muleTaskPanel";
import {StrUtil} from "@/utils/StrUtil";

export default {
  name: "ServiceTaskPanel",
  components: {NormalTaskPanel, MuleTaskPanel, MailTaskPanel},
  props: {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      typeList: [
        {key: "normal", name: "服务任务"},
        {key: "mail", name: "邮件任务"},
        {key: "mule", name: "Mule任务"},
        // { key: "camel", name: "Camel任务"},
        // { key: "shell", name: "Shell任务"},
        // { key: "http", name: "Http任务"},
      ],
      serviceTaskForm: {
        type: '',
      },
    }
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  methods: {
    resetTaskForm() {
      const {serviceTaskForm} = this;
      for (let key in serviceTaskForm) {
        let value = this.modelerStore.element?.businessObject[key] || serviceTaskForm[key];
        this.$set(serviceTaskForm, key, value);
      }
      if (StrUtil.isBlank(serviceTaskForm.type)) {
        serviceTaskForm.type = 'normal';
      }
      this.deleteElementFormExtensions();
    },

    // 选择类型
    changeType(value) {
      // 删除与之前服务类型相关的属性
      delete this.modelerStore.element.businessObject?.type;
      this.serviceTaskForm.type = value;
      if (this.serviceTaskForm.type !== 'normal') {
        this.updateCustomElement('type', value);
      }
      this.deleteElementFieldExtensions();
    },

    updateCustomElement(key, value) {
      const taskAttr = Object.create(null);
      taskAttr[key] = value;
      this.modelerStore.modeling.updateProperties(this.modelerStore.element, taskAttr);
    },

    // 新建节点时,默认是用户节点,会添加表单相关扩展属性,当前任务直接删除掉
    deleteElementFormExtensions() {
      const element = this.modelerStore.element;
      if (element.businessObject?.extensionElements?.values) {
        element.businessObject.extensionElements.values =
          element.businessObject.extensionElements.values.filter(ex => ex.$type !== 'flowable:FormItems');
      }
    },
    // 切换服务类型时,删除之前配置的Field属性
    deleteElementFieldExtensions() {
      const element = this.modelerStore.element;
      if (element.businessObject?.extensionElements?.values) {
        element.businessObject.extensionElements.values =
          element.businessObject.extensionElements.values.filter(ex => ex.$type !== 'flowable:Field');
      }
    }
  },
};
</script>
